`<!-- 首页 -->
<template>
  <div class="blogHome">
    <newNavVue></newNavVue>
    <div >
      <sg-navbar></sg-navbar>
      <div class="container">
        
        <div class="fl-box">
          <div class="fl-left">
            <div class="seach">
              <Search></Search>
            </div>
            <div class="ul-box">
                <ul style="width: 100%;">
              <li v-for="item in sizeList" :key="item">
                <span>
                  {{ item.title }}
                </span>
              </li>
            </ul>
            </div>
          
          </div>
          <div class="fl-right">
            <div class="block">
              <el-carousel height="300px">
                <el-carousel-item v-for="imgUrl in imgList" :key="imgUrl">
                  <img style="height: 100%;" :src="imgUrl.imgUrl" alt="">
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
        <el-row  :gutter="30">
          <el-col :sm="24" :md="16" style="transition:all .5s ease-out;margin-bottom:30px;">
            <sg-articlelist></sg-articlelist>
          </el-col>
          <el-col :sm="24"  :md="8" >
            <sg-rightlist></sg-rightlist>
          </el-col>
        </el-row>
      </div>
      
    </div>
<!--    <div v-show="showLoad">-->
<!--      <Load/>-->
<!--    </div>-->
    <bottom-nav/>
    <div v-if="equipmentShow" class="phoneLogin" @click="phoneLogin()">尚未登录点击我去登录</div>
    <kbnVue></kbnVue>
  </div>

</template>

<script>
import Load from "@/common/Load";
import header from '../views/header'
import articlelist from '../views/articlelist'
import rightlist from '../views/rightlist'
import Search from "@/components/search/search.vue";
// import cbNav from "@/components/CeBianNav/cbNav.vue";
import BottomNav from '@/components/bottom-nav.vue';
import newNavVue from '@/components/CeBianNav/newNav.vue';
import kbnVue from '@/components/kbn/kbn.vue';
// img
import img1 from '@/assets/AINewhome/AI-bg.png'
import img2 from '@/assets/AINewhome/AIlt.png'
import img3 from '@/assets/AINewhome/AIcx.png'
import img4 from '@/assets/AINewhome/AIwz.png'
    export default {
        name:'BlogHome',
        data() { //选项 / 数据
            return {
              showLoad: false,
              equipmentShow: false,
              sizeList:[
                {
                  id:1,
                  title:"后端"
                },
                {
                  id:2,
                  title:"前端"
                },
                {
                  id:3,
                  title:"移动开发"
                },
                {
                  id:4,
                  title:"Java"
                },
                {
                  id:5,
                  title:"Python"
                },
                {
                  id:6,
                  title:"Vue"
                },
                {
                  id:7,
                  title:"人工智能"
                },
                {
                  id:8,
                  title:"大数据"
                },
                {
                  id:9,
                  title:"数据库"
                },
                {
                  id:10,
                  title:"云平台"
                },
                {
                  id:11,
                  title:"前沿技术"
                },
                {
                  id:12,
                  title:"开源"
                },
                {
                  id:13,
                  title:"小程序"
                },
                {
                  id:14,
                  title:"开发工具"
                },
                {
                  id:15,
                  title:"网络与通信"
                },
                {
                  id:16,
                  title:"测试"
                },
                {
                  id:17,
                  title:"软件工程"
                },
                {
                  id:18,
                  title:"学习与成长"
                },
                {
                  id:19,
                  title:"资讯"
                },
                {
                  id:20,
                  title:"运维"
                },
                {
                  id:21,
                  title:"ChatGPT"
                },
                {
                  id:22,
                  title:"虚拟数字人"
                },
              ],
              imgList:[
                {
                  id:1,
                  imgUrl:img1,
                },
                {
                  id:2,
                  imgUrl:img2,
                },
                {
                  id:3,
                  imgUrl:img3,
                },
                {
                  id:4,
                  imgUrl:img4,
                },
              ]
            }
        },
        methods: { //事件处理器
          //判断是手机端还是pc端 true为手机端 false为pc端
          _isMobile() {
            return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
          },
          phoneLogin(){
            this.$router.push("/phoneLogin")
          },
          showLoadFun(){
           // this.$router.push({
           //   path: '/load',
           //   params:{
           //     time,
           //     to
           //   }
           // })
           //  this.showLoad = true;
           //  setTimeout(()=>{
           //    this.showLoad = false
           //  },2000)
          },
         
        },
        components: { //定义组件
            'sg-navbar':header,
            'sg-articlelist':articlelist,
            'sg-rightlist':rightlist,
            Load,
            Search,
            // cbNav,
            newNavVue,
            BottomNav,
            kbnVue
        },
         created() { //生命周期函数
           this.equipmentShow =this._isMobile();
          this.showLoadFun();
        },
        beforeDestroy() {

          this.showLoadFun();
        }
    }
</script>

<style lang="less" scoped>
.el-carousel__item{
    display: flex;
    justify-content: center;
    align-items: center;
  }
.fl-box{
  width: 100%;
  height: 300px;
  // background-color: aqua;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 50px;
  .fl-left{
    width: 65%;
    height: 100%;
    // background-color: rgb(255, 255, 255);
    // flex-direction: row;
   
    display: flex;
    justify-content: space-around;
    align-items: center;
     flex-wrap: wrap;
     .ul-box{
      width: 100%;
      height: 50%;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
     }
    ul{
      width: 100%;
      height: 40px;
      // padding: 20px 0;
      box-sizing: border-box;
      display: flex;
      // justify-content: space-around;
      background-color: rgb(255, 255, 255);
      align-items: center;
      flex-wrap: wrap;
      overflow: hidden;
      transition: all 0.2s;

        li{
        // width: 10%;
        height: 40px;
        // display: block;
        display: flex;
        padding: 0 25px;
        // margin: 0 10px;
        justify-content: center;
        align-items: center;
        background-color: rgb(255, 255, 255);
				cursor:pointer;
      }
    }
    ul:hover{
      height: 100%;
      overflow: visible;
	    transition: all 0.2s;
    }
    li:hover{
      span{
        color: #007aff;
      }
    }
  }
  .fl-right{
    width: 30%;
    height: 100%;
    // background-color: rgb(255, 255, 255);
  }
}
.seach{
    width: 100%;
    // height: 100px;
    // margin-bottom: 50px;
    /* background-color: #64609E; */
}
.blogHome{
  // position: relative;
  // z-index: 1;
  // background-color: #efefef;
  // /*背景色*/
  // background-image: linear-gradient(90deg, rgba(150, 150, 150, 0.15) 10%, rgba(134, 134, 134, 0) 10%), linear-gradient(0deg, rgba(151, 151, 151, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
  // /*rgba(0, 0, 0, 0)，transparent全透明黑*/
  // background-size: 18px 18px;
  background-color: #efefef;

  .phoneLogin{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: rgba(84, 172, 247,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}
</style>
